import React, {useRef, useState, useEffect} from "react";
import {
    ActionType, EditableProTable,
    ModalForm, ProColumnType, ProForm,
    ProFormDateTimePicker, ProFormDigit, ProFormRadio,
    ProFormSelect,
    ProFormText,
    ProFormList,
    ProFormGroup,
    ProFormTextArea,
} from "@ant-design/pro-components";
import {NetworkListItem} from "@/pages/power/network/data";
import {Button, message} from "antd";
import {dataCenterSelectList} from "@/pages/power/data-center-list/service";
import {organizationSelectList} from "@/pages/organization/org-list/service";
import {NetworkConnTypeEnum} from "@/pages/data.enum";
import {organizationOrderAdd} from "@/pages/power/resource-activate/service";

import {Col, Row, Space} from 'antd';

const handleNetworkAdd = async (fields: NetworkListItem) => {
    const hide = message.loading('正在添加');

    try {
        await organizationOrderAdd({...fields});
        hide();
        message.success('添加成功');
        return true;
    } catch (error) {
        hide();
        message.error('添加失败请重试！');
        return false;
    }
};

type AddNetworkProps = {
    modalVisible: boolean;
    onClose: () => void;
    onSuccess: () => void;
};

const AddNetworkModalForm: React.FC<AddNetworkProps> = (props) => {
    const {modalVisible, onClose, onSuccess} = props;
    const [addNetworkModalVisible, handleAddNetworkModalVisible] = useState<boolean>(modalVisible);
    const [publicIpVisible, setPublicIpVisible] = useState<boolean>(false);
    /** 分布更新窗口的弹窗 */
    const actionRef = useRef<ActionType>();
    useEffect(() => {
        setPublicIpVisible(false)
        handleAddNetworkModalVisible(modalVisible);
    }, [modalVisible]);

    useEffect(() => {
        if (!addNetworkModalVisible) {
            onClose();
        }
    }, [addNetworkModalVisible]);

    const handleConnTypeChange = (value) => {
        if (value === 'internet') {
            setPublicIpVisible(true);
        } else {
            setPublicIpVisible(false);
        }
    };

    return (
        <ModalForm
            title="开通网络"
            width="650px"
            open={addNetworkModalVisible}
            onOpenChange={handleAddNetworkModalVisible}
            onFinish={async (value) => {
                const success = await handleNetworkAdd(value as NetworkListItem);
                if (success) {
                    onClose()
                    onSuccess()
                    handleAddNetworkModalVisible(false);
                    if (actionRef.current) {
                        actionRef.current.reload();
                    }
                }
            }}
            modalProps={{destroyOnClose: true}}
            initialValues={{
                resourceType: 'network',
            }}
            rowProps={{
                gutter: [20, 0],
            }}
        >
            <ProFormText
                name="resourceType"
                label="资源类型"
                disabled={true}
                hidden={true}
            />
            <Row>
                <Col span={8}>
                    <Space>
                        <ProFormSelect
                            label="资源池"
                            name="dataCenterId"
                            width={200}
                            rules={[
                                {
                                    required: true,
                                    message: '请选择资源池',
                                },
                            ]}
                            placeholder="请选择资源池"
                            request={async () => {
                                const res = await dataCenterSelectList({});
                                return res.data.map((item) => ({
                                    label: item.name,
                                    value: item.dataCenterId,
                                }));
                            }}
                        />
                    </Space>
                </Col>

                <Col span={8} offset={4}>
                    <Space>
                        <ProFormSelect
                            label="租户"
                            name="organizationId"
                            style={{width: 200}}
                            request={async () => {
                                const res = await organizationSelectList({});
                                return res.data.map((item) => ({
                                    label: item.name,
                                    value: item.organizationId,
                                }));
                            }}
                            placeholder="请选择租户信息"
                            rules={[{required: true, message: '请选择租户信息'}]}
                            colProps={{
                                span: 8,
                            }}
                        />
                    </Space>
                </Col>
            </Row>

            <Row>
                <Col span={20}>
                    <Space>
                        <ProFormText
                            name="networkName"
                            label="网络名称(备注)"
                            width={"md"}
                            rules={[{required: true, message: '请输入网络名称(备注)'}]}
                        />
                    </Space>
                </Col>
            </Row>

            <Row>
                <Col span={20}>
                    <Space>
                        <ProFormSelect
                            name="connType"
                            label="连接类型"
                            valueEnum={NetworkConnTypeEnum}
                            width={"md"}
                            onChange={handleConnTypeChange}
                        />
                    </Space>
                </Col>
            </Row>




            {publicIpVisible && (<ProFormList
                    // style={{width: '330px'}}
                    name="publicIpList"
                    initialValue={[{publicIp: ''}]}
                    creatorButtonProps={{
                        position: 'bottom',
                        creatorButtonText: '添加一个互联网IP',
                    }}
                >
                    <Row>
                        <Col span={8}>
                            <ProFormText
                                width={"md"}
                                name="publicIp"
                                label="互联网IP"
                            />
                        </Col>
                        <Col span={4} offset={2}>
                            <ProFormText
                                width={"md"}
                                name="port"
                                label="端口"
                            />
                        </Col>
                        <Col style={{textAlign: 'right'}} span={4} offset={2}>
                            <ProFormDigit
                                name="bandwidth"
                                label="带宽"
                                width={150}
                                fieldProps={
                                    {addonAfter: 'M'}
                                }
                            />
                        </Col>
                    </Row>
                </ProFormList>
            )}
            <ProFormDigit
                name="bandwidth"
                label="总带宽"
                width={200}
                fieldProps={
                    {addonAfter: 'M'}
                }
                hidden={!publicIpVisible}
            />

        </ModalForm>
    );
}

export default AddNetworkModalForm;
